{extend name="base" /}
{block name="style"}
<style>
    .main { padding-top: 20px; min-height: 550px; }
    .reset-block { line-height: 22px; }
    .reset-col-sm-4 { width: 35.8%; }
    .reset-col-sm-8 { width: 64.2%; }
    .panel{ box-shadow:none; -webkit-box-shadow:none; margin-bottom: 0; }
    .panel-heading { padding: 6px 15px; }
    .panel-heading a { color: #888; }
    #homepage img { padding: 0; margin: 0; }
    #homepage img { display: block; width: 100%; }
    #homepage .nav-tabs>li.active>a,
    .nav-tabs>li.active>a:focus,
    .nav-tabs>li.active>a:hover {
        color: #fff;
        background-color: #42399C;
        border: 0;
    }
    #homepage .nav-tabs>li>a { border: 0; color: #000; }
    #homepage .tab-text { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 0;  }
    #homepage .tab-text a {  font-size: 16px;  }
    #homepage .tab-text span { padding-right: 5px; font-size: 3rem; vertical-align: middle; }
    #homepage .tab-date { text-align: right; font-size: 15px; margin: 0;margin-top: 5px; }
    #homepage .list-group-item { position: relative; display: block; border-left: 0; border-right: 0; padding:6px 0; }
    #homepage .thumbnail { border: 0; padding: 0; position: relative; margin-left:auto; margin-right: auto;; }
    #homepage .thumbnail img { width: 100%; height: 100%; }
    #homepage .thumbnail p {color: #fff;position: absolute;bottom: 0;width: 100%;margin: 0;text-align: center;background: rgba(0, 0, 0, 0.6);padding: 10px 0;font-size: 16px;}

    .dh ul { position: relative; overflow: hidden; width: 100%; }
    .dh ul li { float: left; width: 15%; overflow: hidden; position: relative; cursor: pointer; }
    .dh ul li .bg { display: block; width: 100%; height: 100%; overflow: hidden; }
    .dh ul li .bg img {  height: 187px;  }
    .dh ul li .layer { position: absolute; bottom: 0; left: 0; width: 100%; background: transparent; height: 100%; overflow: hidden; }
    .dh ul li .layer .p1 { color: #fff; font-weight: bold; margin: 30px 0 0 20px; }
    .dh ul li .layer .p2 { color: #fff; margin: 0; margin-left: 20px; }

    .carousel-indicators{ bottom:5px;}
    .carousel-indicators li{ margin: 0 8px; width:12px;height:12px;border-radius: 12px;border:0; background: rgba(255,255,255,.4)}
    .carousel-indicators .active{ margin: 0 8px; }

    @media (max-width: 767px) {
        .reset-block { line-height: 18px; }
        .col-xs-12 { width: 100%; }
        .main { padding-bottom: 20px; }
        .dh ul li { width: 100%; float: none; }
        .reset-col-sm-8 { padding-right: 40px; }
        div.reset-block { padding: 0 50px; }
        .control img{ width:30px; }
        .carousel-indicators{ bottom:-5px;}
        .carousel-indicators li{ margin: 0 5px; width:10px;height:10px;border-radius: 10px;}
        .carousel-indicators .active{ margin: 0 5px; width:10px;height:10px; }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        .main{ min-height: 450px; }
        #homepage .list-group-item {  padding: 3px 0  }
        #homepage .tab-text{line-height: 15px;}
        #homepage .tab-text a{ font-size: 14px;  }
        #homepage .tab-date{ margin: 0;font-size: 14px; line-height: 15px;  }
        #homepage .thumbnail p{ font-size: 14px; }
        .layer p{ font-size: 14px; }
    }

    @media (min-width: 992px){
        #homepage .list-group-item{ padding:6px  0;}
        #homepage .thumbnail{ width:165px;height:165px; }
        .reset-block { line-height: 18px; }
        .dh ul li .layer .p1 { font-size: 16px; margin-left: 10px; }
        .dh ul li .layer .p2 { font-size: 12px; margin-left: 10px; }
    }

    @media (min-width: 1200px) {
        #homepage .list-group-item{ padding: 13px 0; }
        #homepage .thumbnail{ width:210px;height:210px; }
        .dh ul li .layer .p1 {  font-size: 26px;  }
        .dh ul li .layer .p2 {  font-size: 16px;  }
    }

</style>
<link rel="stylesheet" href="/assets/lunbo/css/shutter.css">
{/block}
{block name="content"}
<section id="banner">
    <div class="shutter">
        <div class="shutter-img">
            <a href="#" data-shutter-title="Iron Man"><img src="/assets/img/banner-1.jpg" alt="#"></a>
            <a href="#" data-shutter-title="Iron Man"><img src="/assets/img/banner-2.jpg" alt="#"></a>
            <a href="#" data-shutter-title="Iron Man"><img src="/assets/img/banner-3.jpg" alt="#"></a>
        </div>
        <ul class="shutter-btn">
            <li class="prev"></li>
            <li class="next"></li>
        </ul>
    </div>
</section>
<section id="homepage" class="main">
    <div class="container">
        <div class="row" style="padding: 0 15px;">
            <div class="reset-col-sm-4 col-xs-12 reset-block" style="padding-right: 30px;border:0;">
                <div class="row">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#notice" data-toggle="tab">新闻动态</a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="notice">
                            <ul class="list-group">
                                {volist name="posts" id="vo"}
                                <li class="list-group-item">
                                    <p class="tab-text">
                                        <span>·</span><a href="/post/{$vo.id}">{$vo.title}</a></p>
                                    <p class="tab-date">{$vo.create_time|date="Y.m.d",###}</p>
                                </li>
                                {/volist}
                            </ul>
                        </div>
                        <div class="tab-pane fade" id="party">
                            <ul class="list-group">
                                {volist name="ccp" id="vo"}
                                <li class="list-group-item">
                                    <p class="tab-text">
                                        <span>·</span><a href="/party/dynamic/{$vo.id}">{$vo.title}</a></p>
                                    <p class="tab-date">{$vo.create_time|date="Y.m.d",###}</p>
                                </li>
                                {/volist}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reset-col-sm-8 col-xs-12" style="padding-left: 40px;">
                <div class="row">
                    <div class="panel panel-default" style="border:0;">
                        <div class="panel-heading clearfix" style="background: transparent;border:0;">
                            <span>经典案例</span>
                            <a class="rt" href="/project" >更多></a>
                        </div>
                        <div class="panel-body" style="padding-top: 5px;">
                            <div class="row">
                                {volist name="examples" id="vo"}
                                <div class="col-xs-12 col-sm-4">
                                    <a href="/project/{$vo.project_id}" class="thumbnail">
                                        <img src="{$vo.poster}">
                                        <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{$vo.name}</p>
                                    </a>
                                </div>
                                {/volist}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-xs-12 dh sfq">
                <ul>
                    <li class="curr">
                        <div class="bg" >
                            <img src="/assets/img/d_01.png">
                        </div>
                        <a class="layer"  href="javascript:void(0)" style="background:rgba(123,148,214,0.7) ">
                            <p class="p1">85+</p>
                            <p class="p2">专业施工养护团队人数</p>
                        </a>
                    </li>
                    <li>
                        <div class="bg">
                            <img src="/assets/img/d_02.png">
                        </div>
                        <a class="layer"  href="javascript:void(0)" style="background:rgba(107,173,123,0.7) ">
                            <p class="p1">850+</p>
                            <p class="p2">累计服务业主数量</p>
                        </a>
                    </li>
                    <li>
                        <div class="bg">
                            <img src="/assets/img/d_03.png">
                        </div>
                        <a class="layer"  href="javascript:void(0)" style="background:rgba(214,148,49,0.7) ">
                            <p class="p1">358+</p>
                            <p class="p2">施工验收规范</p>
                        </a>
                    </li>
                    <li>
                        <div class="bg">
                            <img src="/assets/img/d_04.png">
                        </div>
                        <a class="layer" href="javascript:void(0)" target="_blank" style="background:rgba(66,66,132,0.7) ">
                            <p class="p1">205+</p>
                            <p class="p2">优秀园艺设计奖</p>
                        </a>
                    </li>
                    <li>
                        <div class="bg">
                            <img src="/assets/img/d_05.png">
                        </div>
                        <a class="layer" href="javascript:void(0)" style="background:rgba(66,90,198,0.7) ">
                            <p class="p1">99%+</p>
                            <p class="p2">综合客户满意度</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
{/block}
{block name="script"}
<script src="/assets/lunbo/js/jquery.min.js"></script>
<script src="/assets/lunbo/js/velocity.js"></script>
<script src="/assets/lunbo/js/shutter.js"></script>
<script type="text/javascript">
    var client = document.body.clientWidth;
    var w = 500;
    if (client < 900) {
        w = 150;
    }
    $(function () {
        $('.shutter').shutter({
            shutterW: '100%', // 容器宽度
            shutterH: w, // 容器高度
            isAutoPlay: true, // 是否自动播放
            playInterval: 3000, // 自动播放时间
            curDisplay: 3, // 当前显示页
            fullPage: false // 是否全屏展示
        });
    });
    var width = $(window).width();
    if (width > 767) {
        animateImg();
    }

    function animateImg() {
        jQuery('.dh ul li.curr').animate({ width: '39%'}, 'slow');
        jQuery('.sfq ul li').hover(function () {
//          $(this).animate({ width: '39%' }, 'slow').siblings().animate({width: '15%'}, 'slow').removeClass('curr');
            $(this).addClass('curr').stop()
                .animate({width: '39%'}, 400)
                .siblings().stop()
                .animate({width: '15%'}, 400)
                .removeClass('curr');
        }, function () {})
    }
</script>
{/block}